<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>

<style>
    .collage1-bottom p{
        padding: 0 0.1rem;
        padding-top: 0.1rem;
        padding-bottom: 0.05rem;
        color: #0e0e0e;
        font-size: 0.14rem;
        text-align: justify;
        line-height: 0.26rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-height: 0.64rem;
    }
    .collage{
        margin-top: 0.38rem;
    }
    .collage1-txt{
        margin-left:0;
        text-align: center;
    }
    .collage1-txt span i b{
        font-weight: normal;
    }
</style>

</head>

<body>

<div id="app" v-cloak>

<!--  / header  -->
<div class="header_longevity">
    <div class="header_map_longevity">   
        <img src="images/jiantou.png" alt="">
        <span>返回</span>
    </div>
    <div class="logo_longevity">商品列表</div>  
</div>
<!--  / header  -->


<div class="collage clearfix">
	<div class="row clm4">
		<div class="col-xs-6 clp4" v-for="items1 in list" @click="goShopDetail(items1.goods_id)">
			<div class="collage1">
                <div class="collage1-top" :style="{backgroundImage: 'url(' + items1.logo_pic + ')', backgroundSize:'cover'}">
                        <!-- <img :src="items1.logo_pic" alt="" width="100%"> -->
                        <div class="collage1-bg"></div>
                        <div class="collage1-txt" v-if="items1.second>=0">距结束 <span><i><b v-if="items1.djs.dd<=9">0</b>{{items1.djs.dd}}</i> : <i><b v-if="items1.djs.hh<=9">0</b>{{items1.djs.hh}}</i> : <i><b v-if="items1.djs.mm<=9">0</b>{{items1.djs.mm}}</i> : <i><b v-if="items1.djs.ss<=9">0</b>{{items1.djs.ss}}</i></span></div>
                        <div class="collage1-txt" v-else>拼团已结束</div>
                </div>        
                <div class="collage1-bottom">
                        <p>{{items1.goods_name}}{{items1.goods_des}}</p>
                        <div class="collage1-bottom-txt clearfix">
                            <span class="collage1-bottom-left">￥<i>{{items1.price}}</i></span>
                            <span class="collage1-bottom-right">已拼团 <i>{{items1.salesnum}}</i>/{{items1.tuan}}</span>
                        </div>
                </div>     
    		</div>
		</div>
	</div>

    
</div>

</div>

</body>
<script>
$(window).ready(function(){

    var vm = new Vue({
        el:"#app",
        data(){
          return{
            goods_list:[],
            list: [],
          }
        },
        created:function(){
          var $this = this;
          $this.getGoodsList();                                          
        },
        mounted:function(){
            var $this = this;
            setInterval( ()=> {
                for (var key in $this.list) {

                    var aaa = parseInt( this.list[key]["end_time"] );
                    var bbb = new Date().getTime();
                    var rightTime = aaa - bbb;
                    // var rightTime = parseInt( $this.list[key]["second"] );
                    if (rightTime > 0) {
                        var dd1 = Math.floor(rightTime /1000 / 60 / 60 / 24);
                        var hh1 = Math.floor((rightTime /1000  / 60 / 60) % 24);
                        var mm1 = Math.floor((rightTime /1000 / 60) % 60);
                        var ss1 = Math.floor(rightTime /1000 % 60);
                        $this.list[key]["djs"] = {dd:dd1,hh:hh1,mm:mm1,ss:ss1};
                    }                    
                }
            }, 1000);
           
        },
        methods:{
          //团购列表-全部商品
            getGoodsList:function(){
                var $this = this;
                const data = {
                    
                }
                Axios.post(window.Url.goods_list,data).then((res) => {
                  if(res.result == 1){
                    $this.goods_list = res.info.goods;  
                    $this.goods_list.map( (obj,index)=>{
                        $this.$set(
                            obj,"djs",InitTime(obj.end_time)
                        );
                    })
                    $this.list = $this.goods_list;  
                  }else
                  {
                    console.log("活力健身-相关推荐:"+res.info);
                  }
                  
                }).catch((err) => {
                  console.log("活力健身-相关推荐:"+err)
                })              
            },   
            goShopDetail:function(goods_id){
                setCookie("goodId",goods_id);
                window.location.href="shopDetail.html?id="+goods_id;
            }      
        }

    })

function InitTime(time1){
    var dd1,hh1,mm1,ss1 = null;
    var time = parseInt(time1) - new Date().getTime();
    if(time<=0){
        return '拼团已结束'
    }else{
        dd1 = Math.floor(time /1000 / 60 / 60 / 24);
        hh1 = Math.floor((time /1000 / 60 / 60) % 24);
        mm1 = Math.floor((time /1000 / 60) % 60);
        ss1 = Math.floor(time /1000 % 60);

        var obj1=new Object();
        obj1.dd=dd1;
        obj1.hh=hh1;
        obj1.mm=mm1;
        obj1.ss=ss1;
        var obj1={dd:dd1,hh:hh1,mm:mm1,ss:ss1};
        // var str = dd1+"tian";
        return obj1;
    }
}


$('.banner').height($(window).width()*400/750);

var mySwiper_banner = new Swiper ('.swiper-container-banner', {
    loop: true,
    pagination: '.swiper-pagination-banner',
	autoplay : 5000,
	autoplayDisableOnInteraction : false,
})
$('.header_map_longevity').click(function(){
    window.location.href = "index.html";
    // history.go(-1);
});
// $('.longevity1 li').click(function(){
//     window.location.href = "InformationDetails.html";
// });
// $('.collage1').click(function(){
//     window.location.href = "shopDetail.html";
// });

  
})  
</script>
</html>
